<template>
  <div class="coupon">
    <app-header>
      <img slot="title" @click="prev" src="../assets/上一步.png" alt="">
      <p slot="city">红包卡券</p>
    </app-header>
    <div class="coupon-top">
      <div class="coupon-top__item">
        <span>最新领购</span>
        <span>即将到期</span>
      </div>
    </div>
    <div class="coupon-item" v-for="(item, index) in couponArr" :key="index">
      <div class="left"></div>
      <div class="coupon-item__top">
        <div class="top__img"></div>
        <div class="top__content">
          <p>{{item.name}}</p>
          <p>{{item.begin_date}}-{{item.end_date}}</p>
        </div>
        <div class="top__price">
          <p>
            <span>￥</span>7
          </p>
          <p>{{item.description_map.sum_condition}}</p>
        </div>
      </div>
      <div class="right"></div>
      <div class="coupon-item__down">
        <p>{{item.description_map.online_paid_only}} <img src="../assets/下箭头.png" alt=""></p>
        <button>去使用</button>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from './AppHeader.vue'
import { state } from '../store'

export default {
  name: 'ShoppingCoupon',
  data () {
    return {
      couponArr: []
    }
  },
  components: { AppHeader },
  created () {
    this.$http.ShoppingCoupon({
      user_id: state.user_id,
      limit: 5,
      offset: 0
    }).then(res => {
      this.couponArr = res.data
      console.log(res.data)
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    prev () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
  }
  .coupon{
    width: 100%;
    height: 1334px;
    background-color: #f5f5f5;
    .coupon-top{
      width: 100%;
      height: 75px;
      background-color: #fff;
      .coupon-top__item{
        width: 90%;
        height: 75px;
        margin: 0px auto;
        line-height: 75px;
        span:nth-child(1){
          font-size: 30px;
          font-weight: bold;
          color: #00a2ff;
        }
        span:nth-child(2){
          margin-left: 50px;
          font-size: 30px;
          color: #717171;
        }
      }
    }
    .coupon-item{
      width: 90%;
      height: 220px;
      margin: 22px auto 0px;
      border-radius: 20px;
      background-color: #fff;
      position: relative;
      .coupon-item__top{
        width: 90%;
        height: 140px;
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #ddd;
        .top__img{
          width: 80px;
          height: 80px;
          background-color: #00a6ff;
          border-radius: 10px;
        }
        .top__content{
          width: 355px;
          height: 80px;
          p:nth-child(1){
            font-size: 32px;
          }
          p:nth-child(2){
            margin-top: 15px;
            font-size: 18px;
            color: #7a7a7a;
          }
        }
        .top__price{
          width: 130px;
          height: 85px;
          p:nth-child(1){
            font-size: 42px;
            color: #ff4b33;
            text-align: center;
            span{
              position: relative;
              top: -10px;
              color: #ff4b33;
              font-size: 20px;
            }
          }
          p:nth-child(2){
            font-size: 22px;
            color: #7f7f7f;
          }
        }
      }
      .left, .right{
        width: 22px;
        height: 22px;
        background-color: #f5f5f5;
        border-radius: 50%;
        position: absolute;
        top: 130px;
      }
      .left{
        left: -10px;
      }
      .right{
        right: -10px;
      }
      .coupon-item__down{
        width: 90%;
        height: 78px;
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
          font-size: 20px;
          color: #7a7a7a;
          img{
            width: 20px;
            vertical-align: middle;
          }
        }
        button{
          color: #fff;
          border: none;
          outline: none;
          background-color: #ff4b33;
          border-radius: 50px;
          padding: 11px 25px;
          font-size: 23px;
        }
      }
    }
  }
</style>
